<%--
  Created by IntelliJ IDEA.
  User: dhd
  Date: 2024/9/4
  Time: 10:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<html>
<head>
    <title>书籍管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
        }

        h2 {
            text-align: center;
        }

        .container {
            max-width: 800px;
            margin: auto;
            background: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        input[type="text"] {
            width: calc(20% - 10px); /* 调整宽度以避免撑满容器 */
            padding: 8px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            padding: 10px 20px;
            border: none;
            color: white;
            background-color: #007BFF;
            cursor: pointer;
            border-radius: 4px;
        }

        button:hover {
            background-color: #0056b3;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        th {
            background-color: #007BFF;
            color: white;
        }

        td {
            text-align: center;
        }

        .TBimgs {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div>
    <di><h2>书籍列表</h2></di>
    <div>
        书籍名称：<input type="text" id="bookName"/>
        作者：<input type="text" id="author"/>
        <button onclick="search()">搜索</button>
    </div>
    <div>
        <button onclick="addBook()">新增</button>
        <table border="1px" width="800px" cellspacing="0">
            <tr>
                <td>编号</td>
                <td>图片</td>
                <td>书籍名称</td>
                <td>作者</td>
                <td>ISBN</td>
                <td>出版社</td>
                <td>出版时间</td>
                <td>数量</td>
                <td>描述</td>
                <td>操作</td>
            </tr>
        </table>
        <div id="pageDiv">

        </div>
    </div>
</div>
</body>
</html>
<script>
    function onloadPage(bookName, author, pageNum) {
        let data = {
            bookName,
            author,
            pageNum
        }
        $.ajax({
            url: '${pageContext.request.contextPath}/book.action',
            type: 'post',
            data: data,
            dataType: 'json',
            success: bookList,
            error: function () {
                alert("查询失败！请联系管理员")
            }
        })
    }

    function bookList(data) {
        console.log(data);
        //清空table
        $("table tr:not(:first-child)").empty();

        $("#pageDiv").empty();

        data.dataList.forEach(dd => {
            $(`table`).append(`<tr>
                <td>` + dd.bookId + `</td>
                <td><img class="TBimgs" src="` + dd.coverImage + `" </td>
                <td>` + dd.bookName + `</td>
                <td>` + dd.author + `</td>
                <td>` + dd.isbn + `</td>
                <td>` + dd.publisher + `</td>
                <td>` + dd.publisherDate + `</td>
                <td>` + dd.stockQuantity + `</td>
                <td>` + dd.description + `</td>
                <td>
                    <button onclick="editBook(` + dd.bookId + `)">编辑</button>
                    <button onclick="del(` + dd.bookId + `)">删除</button>
                </td>
            </tr>`)
        })
        //增加分页控件
        $('#pageDiv').append(`
                <button onclick="showpage(1)">首页</button>
                <button onclick="showpage(` + (data.pageNum - 1) + `)" id='upPage' disabled=true>上一页</button>
                <span>` + data.pageNum + `/` + data.countPage + `</span>
                <button onclick="showpage(` + (data.pageNum + 1) + `)" id='downPage'>下一页</button>
                <button onclick="showpage(` + data.countPage + `)">尾页</button>
            `);
        if ((data.pageNum - 1) <= 0) {
            $('#upPage').attr("disabled", true);
        } else {
            $("#upPage").removeAttr("disabled");

        }

        if ((data.pageNum + 1) > data.countPage) {
            $('#downPage').attr("disabled", true);
        } else {
            $("#downPage").removeAttr("disabled");
        }

    }

    window.onload = onloadPage('', '', 1);

    //点击搜索
    function search() {
        let bookName = $("#bookName").val();
        let author = $("#author").val();
        onloadPage(bookName, author, 1);
    }

    function showpage(pageNum) {
        let bookName = $("#bookName").val();
        let author = $("#author").val();
        onloadPage(bookName, author, pageNum);

    }

    function addBook() {
        sessionStorage.setItem("id", '')
        window.location.href = "page/EditBook.jsp";
    }

    function editBook(id) {
        sessionStorage.setItem("id", id)
        window.location.href = "page/EditBook.jsp";
    }

    //删除图书
    function del(id) {
        let opr = "del";
        if (confirm("你确定要删除这条记录吗?")) {
            $.ajax({
                url: '${pageContext.request.contextPath}/book.action',
                type: 'post',
                data: {opr, id},
                dataType: 'json',
                success: function () {
                    location.reload();
                },
                error: function () {
                    alert("删除失败！");
                }
            })
        }
    }
</script>
